<template>
  <el-dialog
    
    width="60%"
    @open="onOpen"
    :visible="dialogVisible"
    @close="onclosedlg"
  >
    <el-form :inline="true">
      <el-form-item label="条件名">
        <el-select v-model="search_name">
          <el-option
            v-for="(element,$index) in items"
            :key="$index"
            :label="element.name"
            :value="element.name"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="操作符">
        <el-select v-model="operator">
          <el-option
            v-for="(item,$index) in operators"
            :key="$index"
            :label="item"
            :value="item"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="搜索值">
        <el-input
          v-if="select_item.type=='text'"
          type="text"
          v-model="value"
        ></el-input> 
        <el-input
          v-if="select_item.type=='number'"
          type="number"
          v-model="value"
        ></el-input>
        <el-date-picker
        value-format="yyyy-MM-dd"
          v-if="select_item.type=='date'"
          v-model="value"
        ></el-date-picker>

      </el-form-item>
        <el-form-item label="与或条件">
        <el-select v-model="condition">
          <el-option
        
            label="and"
            value="and"
          />
          <el-option
        
            label="or"
            value="or"
          />
        </el-select>
      </el-form-item>
      
      <el-button
        type="primary"
        @click="add"
      >增加</el-button>
    </el-form>
    <el-table
      :data="querys"
      style="height:400px"
    >
      <el-table-column
        label="条件名"
         align="center"
        prop="expression"
      />
      <el-table-column
        label="操作"
   align="center"
      ><template slot-scope="scope">
          <el-button
            type="primary"
            @click="remove(scope.$index)"
          >删除</el-button>
        </template></el-table-column>
    </el-table>
    <span
      slot="footer"
      class="dialog-footer"
    >
      <el-button @click="onclosedlg">取 消</el-button>
      <el-button
        type="primary"
        @click="ok"
      >确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { getUser } from "../../utils/auth";
import { getDistinctField } from "@/api/统计";
import { Promise } from "q";
import { debug } from 'util';
export default {
  props: ["cate", "name", "dialogVisible"],
  data() {
    return {
      select_item: {},
      items: [],
      search_name: "",
      value: "",
      loading:false,
      operator: "",
      operators: [],
      myoperators: {
        number: ["==", ">", "<"],
        text: ["包含"],
        date: ["==", ">", "<"]
      },
      querys: [],
      date: null,
      condition:"and",
    };
  },
  watch: {
    search_name(value) {
      if(value == "")
      return;
       console.log("value change");
      var ss = this.items.find(e => e.name == value);
      this.select_item = ss;
      console.log("select_item " + JSON.stringify(this.select_item));
      this.operators = this.myoperators[this.select_item.type];
      this.operator = this.operators[0];

      console.log("oper " + this.operator);
      this.value = "";
    }
  },
  created() {
    var schema = require("@/schema/" + this.cate + ".json");
    var props = Object.keys(schema.properties);
    this.items.push({name:'建立卡号',type:'text',property:'建立卡号'});
    this.items.push({name:'建立姓名',type:'text',property:'建立姓名'});
    this.items.push({name:'建立时间',type:'date',property:'建立时间'});
    this.items.push({name:'审核卡号',type:'text',property:'审核卡号'});
    this.items.push({name:'审核姓名',type:'text',property:'审核姓名'});
    this.items.push({name:'审核时间',type:'date',property:'审核时间'});
     this.items.push({name:'删除卡号',type:'text',property:'删除卡号'});
    this.items.push({name:'删除姓名',type:'text',property:'删除姓名'});
    this.items.push({name:'删除时间',type:'date',property:'删除时间'});
    
    props.forEach(p => {
      var item = schema.properties[p];
      var data = { name: item.title, property: p };
      if (item.pattern) {
        data.type = "number";
      }  else if (item.attrs && item.attrs.type == "date") {
        data.type = "date";
      } else {
        data.type = "text";
      }
      console.log("data " + JSON.stringify(data));
      this.items.push(data);
    });

   
    
  },
  methods: {
    async onOpen() {
      //this.loading=true;
      // await Promise.all(
      //   this.items.map(async (e, index) => {
      //     if (e.type == "enum") {
      //       var temp = await getDistinctField(
      //         this.name,
      //         e.property,
      //         this.$root.user.XXID,
      //         this.$root.user.CJPC
      //       );
      //       e.items = temp.map(item => item[e.property]).filter(e => e !== "");
      //       if (e.items.length == 0) {
      //         this.items.splice(index, 1);
      //       }
      //       console.log("items " + JSON.stringify(e.items));
      //     }
      //   })
      // );
       this.condition="and";
      this.search_name = this.items[0].name;
     
      //this.loading = false;
    },
   
    remove(index) {
     
      this.querys.splice(index, 1);
    },
    add() {
      
      if (this.value.trim() == "") {
        this.$alert("搜索值不能为空");
        return;
      }
      
      if( this.select_item.type == "text")
      {
        this.querys.push({ expression:`${this.condition} ${this.select_item.property}.contains("${this.value}")`})
      
      }else if( this.select_item.type == "date")
      {
          this.querys.push({expression:`${this.condition} ${this.select_item.property} ${this.operator} "${this.value}"`})
      }
      
      else{
          this.querys.push({expression:`${this.condition} ${this.select_item.property} ${this.operator} ${this.value}`})
      }
      this.select_item = {};
      this.operator = "";
      this.value = "";
      this.search_name="";
     
    },
    onclosedlg() {
      this.select_item = {};
      this.operator = "";
      this.value = "";
      this.search_name="";
       this.condition="";
     this.querys = [];
      this.$emit("update:dialogVisible", false);
    },
    ok() {
      
      var qq = this.querys.map(e=>e.expression).join(" ");
      if(qq.indexOf("and") == 0){
          qq = qq.replace("and","");
      }  if(qq.indexOf("or") == 0){
          qq = qq.replace("or","");
      }
     
      this.$emit("beginSearch", qq);
      this.select_item = {};
      this.operator = "";
      this.value = "";
      this.condition="";
      this.querys = [];
      this.$emit("update:dialogVisible", false);
    }
  }
};
</script>
 
